<template>

  <div>
    <h3 style="text-align:center">健康上报系统</h3>
    <div style="width: 70%;margin: auto;">
      <el-form :model="form" align="left" :inline="true" ref="form" label-width="100px" label-position="left" class="demo-ruleForm"style="
    padding-left: 70px;">
        <el-form-item>
               <span slot="label">
                        <span class="span-box">
                                      <i class="el-icon-date"></i>
                            <span> 填报日期 </span>
                        </span>
                    </span>
          <el-input style="background-color:transparent;border:0;" placeholder="0.0.0.0." :disabled="true"
                    v-model="form.Date"></el-input>
        </el-form-item>
        <el-form-item label="姓名" >
          <el-input  class="myInput" v-model.trim="form.Name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input class="myInput" v-model.trim="form.IDCardNumber" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input class="myInput" v-model.trim="form.xuehao" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input class="myInput"v-model.trim="form.PhoneNumber" placeholder=""type="text"></el-input>
        </el-form-item>
        <el-form-item label="体温(度)">
          <el-input class="myInput" v-model.trim="form.temperature" placeholder="36" type="number"></el-input>
        </el-form-item>
<!--        <el-form-item label="紧急联系人">
          <el-input v-model.trim="form.Country" placeholder="中国" type="text"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人联系方式">
          <el-input v-model.trim="form.Country" placeholder="中国" type="text"></el-input>
        </el-form-item>-->
        <el-form-item label="目前所在地">
          <el-cascader class="myInput"size="large" :options="options" v-model="selectedOptions" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="健康状态">
          <div style="margin-top: 0px">
            <el-radio-group v-model="form.healthCon" size="small">
              <el-radio label="健康" border>健康</el-radio>
              <el-radio label="不良" border>不良</el-radio>
              <el-radio label="良好" border>良好</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="请具体选择" label-width="120px"style="height: 0px"></el-form-item>
        <div style="
    padding-left: 100px;">
          <el-row>
            <el-form-item>
              <div style="margin-top: 0px">
                <el-checkbox v-model="form.focusGroups"border size="small">是否为重点人群</el-checkbox>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item>
              <div style="margin-top: 0px">
                <el-checkbox v-model="form.isolated"border size="small">是否处于隔离医学观察</el-checkbox>
              </div>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item>
              <div style="margin-top: 0px">
                <el-checkbox v-model="form.virusTouch"border size="small">近15天是否接触过疑似病例/确诊病例</el-checkbox>
              </div>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item>
              <div style="margin-top: 0px">
                <el-checkbox v-model="form.impRegion"border size="small">最近15天是否到达或途径疫情防控重点区域</el-checkbox>
              </div>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item>
              <div style="margin-top: 0px">
                <el-checkbox v-model="form.impTouch"border size="small">最近15天是否接触过“近14天出入过疫情重点防控地区”的人员</el-checkbox>
              </div>
            </el-form-item>
          </el-row>

          <el-row>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>是否处于高风险地区</span>
                <el-switch
                    style="float: right; padding: 3px 0"
                    v-model="openOnChoose"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </div>


              <div class="text item">
                <el-radio-group v-model="form.travelCity" :disabled="openOnChoose===false?true:false">
                  <div v-for="(o,index) in travelCityList" :key="o">
                    <el-radio :label="o" :key="o" ></el-radio>
                    <el-divider></el-divider>
                  </div>
                </el-radio-group>
                <el-empty description="描述文字"></el-empty>
              </div>


            </el-card>

          </el-row>


        </div>





      </el-form>


    </div>

    <div style="margin: 20px 0;"></div>
    <div style="width: 70%;margin: auto;height: 100px">
      <el-row>
        <el-input    type="textarea" :autosize="{ minRows: 2, maxRows: 5}"
                  placeholder="请输入备注信息" v-model="form.remark">
        </el-input>
      </el-row>
    </div>
    <div style="margin: 20px 0;"></div>
    <el-divider></el-divider>

    <div style="margin: 20px 0;"></div>
    <el-row style="text-align:center;padding-bottom: 20px;align: space-around">
      <el-button type="danger" @click="reset" round>重置</el-button>
      <el-button type="success" @click="submit_form" round>提交</el-button>
      <!--      <el-button type="primary" @click="copy" round>复制文本</el-button>-->
      <!--      <el-button type="success" @click="generate_pw" round>生成密码</el-button>-->
    </el-row>


  </div>


</template>


<script>
import bubbles from '../bubble/index'
import nav_header from "../nav/index"
import bottom from "../bottom/index"
import {login} from "@/fortendView/api/login";

import {regionData, CodeToText} from "element-china-area-data"
import {getToken} from "@/utils/auth";
import {MessageBox} from "element-ui";
import Vue from "vue";
import popMessage from "@/utils/popMessage";
import {upload} from "@/fortendView/api/upload";
import jwtDecode from "jwt-decode";
import {getImpRegionToday} from "@/fortendView/api/getSomeData"; //用来选择中国地区的省市区组件，这样子不用一个个自己写了

export default {
  name: "index",
  components: {
    bottom,
    bubbles,
    nav_header
  },
  data() {
    return {
      isBubble: this.$store.getters.isBubble,
      options: regionData,
      selectedOptions: [],
      comments: "",
      radio: '健康',
      form: {
        Date: new Date().toLocaleDateString(),
        country: "中国",
        userId:'',
        temperature:36,
        emergencyContact:'',//紧急联系人
        emergencyContactNum:'',//紧急联系人电话
        healthCon:'',
        impRegion:false,
        impRegionDir:'',
        impTouch:false,
        virusTouch:false,
        isolated:false,
        location:'',
        cityTravel:false,
        travelCity:'',
        focusGroups:false,
        remark:'',

      },

      captcha:'',
      openOnChoose:false,
      travelCityList:[],


    };
  },
  watch: {},

  computed: {},
  mounted() {
    this.varify()
    this.getTravelList()
  },
  methods: {

    handleChange() {
      let loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {

        loc += CodeToText[this.selectedOptions[i]];
        if (i!=this.selectedOptions.length-1)
          loc+="-"

      }
      this.form.location=loc;
    },

    uploadData(_this){
      let temp=JSON.parse(JSON.stringify(_this.form));//深拷贝
      let token=jwtDecode(getToken());
      temp.userId=parseInt(token.userId);
      /*        impRegion:false,
                  impRegionDir:'',
                  impTouch:false,
                  virusTouch:false,
                  isolated:false,
                  location:'',
                  cityTravel:'',
                  focusGroups:false,*/
      temp.impRegion=temp.impRegion===true?1:0;
      temp.impTouch=temp.impTouch===true?1:0;
      temp.virusTouch=temp.virusTouch===true?1:0;
      temp.isolated=temp.isolated===true?1:0;
      temp.focusGroups=temp.focusGroups===true?1:0;
      temp.cityTravel=_this.form.openOnChoose===true?1:0;

      upload(temp).then(res=>
      {

        popMessage(false,res.data.data,'success')
      }).catch(err=>
      {
      })
    },
    submit_form() {

      if(getToken()!=null){



        this.captcha.show();
      }
      else
      {

        MessageBox.confirm(
            '你当前未登陆，请登陆',
            '确定登陆',
            {
              confirmButtonText: '登录',
              cancelButtonText: '取消',
              type: 'warning'
            }
        ).then(() => {
          //好家伙，通信贼好用！！！
          const  emiter = new Vue()
          emiter.$bus.$emit("changeSome",true)

        })
      }

    },
    reset()
    {
      let temp= {
      Date: new Date().toLocaleDateString(),
          Country: "中国",
          temperature:36,
          emergencyContact:'',//紧急联系人
          emergencyContactNum:'',//紧急联系人电话
          healthCon:'',
          impRegion:false,
          impRegionDir:'',
          impTouch:false,
          virusTouch:false,
          isolated:false,
          location:'',
          cityTravel:false,
          travelCity:'',
          focusGroups:false,
          remark:''}
      this.form=temp;
      this.openOnChoose=false;
    },

    varify() {
      let appid = '2066897222'; // 腾讯云控制台中对应这个项目的 appid
      //生成一个滑块验证码对象

      let _this=this;
       this.captcha = new TencentCaptcha(appid, function (res) {
        // 用户滑动结束或者关闭弹窗，腾讯返回的内容
        if (res.ret === 0) {
          _this.uploadData(_this)
          //成功，传递数据给后台进行验证
          // axios.post('接口路径', {
          //   Ticket: res.ticket,
          //   CaptchaAppId: res.appid,
          //   Randstr: res.randstr,
          //   // 其他参数
          // })
          //     .then(
          //         // 后台验证通过，返回用户信息
          //         // 前端接收并登陆系统
          //     )
          //     .catch(
          //         // 验证失败
          //     )

        } else {
          // 提示用户完成验证


        }
      });
      // 滑块显示

    },


    getTravelList()
    {
      getImpRegionToday().then(res=>{

        let data=res.data;
        let arr=data.data;
        console.log(arr);

        let tempArr=[];
        for (let i = 0; i <arr.length ; i++) {
          if (arr[i].length===0)
          {

          }else {
            tempArr=tempArr.concat(arr[i]);
          }
        }

        this.travelCityList=tempArr
      }).catch(err=>{popMessage(false,"获取高风险地区列表失败","error")})
    }


  }
}
</script>

<style scoped>

.myInput >>> .el-input__inner {
  width: 220px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-radius:0px
  /*outline: medium;*/
}
</style>
